<template>
  <div id="MyMeeting_container" style="height: 98%">
    <el-card>
      <div class="detail">
        <div class="detail_rowleft">
          会議状態:
          <el-select v-model="Search.searchbean.meetingStatus" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="キャンセルされた" value="0"></el-option> </el-select
          >&nbsp; 時間:
          <el-date-picker v-model="value1" type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD" range-separator="～" start-placeholder="開始期日" end-placeholder="終了期日">
          </el-date-picker
          >&nbsp;
          <el-button type="primary" v-preventReClick icon="el-icon-search" @click="searchVisited()">検索</el-button>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="番号" width="50"> </el-table-column>
        <el-table-column prop="mtittle" label="会議のテーマ">
          <template #default="scope">
            <p style="color: blue; cursor: pointer; width: -webkit-fit-content" @click="openDetail(scope.row.mid, scope.row.mpSureflg, scope.row.mpId)">{{ scope.row.mtittle }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="mrName" label="会議室"> </el-table-column>
        <el-table-column prop="mbTime" label="開始時間"> </el-table-column>
        <el-table-column prop="meTime" label="終了時間"> </el-table-column>
        <el-table-column prop="mpType" label="類別">
          <template #default="scope">
            <p v-if="scope.row.mpType == 2" style="color: red">必须参与</p>
            <p v-if="scope.row.mpType == 1">可参与</p>
            <p v-if="scope.row.mpType == 3">可参与</p>
          </template>
        </el-table-column>
        <el-table-column prop="meetingStatus" label="会議状態">
          <template #default="scope">
            <p v-if="scope.row.meetingStatus == ''">全部</p>
            <p v-if="scope.row.meetingStatus == 1">正常</p>
            <p v-if="scope.row.meetingStatus == 0">キャンセルしました</p>
          </template>
        </el-table-column>
        <el-table-column prop="mpSureflg" label="出欠確認">
          <template #default="scope">
            <p v-if="scope.row.mpSureflg == 1">参加</p>
            <p v-if="scope.row.mpSureflg == 0" style="color: red">確認待ち</p>
            <p v-if="scope.row.mpSureflg == 2">参加しない</p>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="会議詳細" v-model="dialogFormVisible" width="32%" custom-class="meetingdialog">
        <div style="width: 568px">
          <table class="mytable" cellpadding="0" cellspacing="0">
            <tr class="mytr">
              <td class="mytd">会社名称</td>
              <td class="mytd1">
                {{ visitedTableList.enterpriseName }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">会議室</td>
              <td class="mytd1">
                {{ visitedTableList.mrName }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">会議のテーマ</td>
              <td class="mytd1">
                {{ visitedTableList.mtittle }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">会議説明</td>
              <td class="mytd1">
                {{ visitedTableList.mcontent }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">会議時間</td>
              <td class="mytd1">
                {{ visitedTableList.meetingtime }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">期間</td>
              <td class="mytd1">
                {{ visitedTableList.period }}
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">発起人</td>
              <td class="mytd1">
                <el-button class="tdbtn">{{ visitedTableList.mpUserName1 }}</el-button>
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">参加必要</td>
              <td class="mytd1">
                <div class="tddiv">
                <el-button
                class="tdbtn1"
                  v-for="mpUserName2 in visitedTableList.mpUserName2"
                  :key="mpUserName2"
                  >{{ mpUserName2 }}</el-button
                >
                </div>
              </td>
            </tr>
            <tr class="mytr">
              <td class="mytd">参加可能</td>
              <td class="mytd1">
                <div class="tddiv">
                <el-button
                class="tdbtn1"
                  v-for="mpUserName3 in visitedTableList.mpUserName3"
                  :key="mpUserName3"
                  >{{ mpUserName3 }}</el-button
                >
                 </div>
              </td>
            </tr>
            <tr class="mytr" v-if="visitedTableList.maid == this.$store.getters.showuserGuid && this.visitedTableList.mpSureremark1 == '1'">
              <td class="mytd">拒否の理由</td>
              <td class="mytd1">
                <div class="tddiv1">
                  <p v-for="reasons in visitedTableList.reasons" :key="reasons" class="tdp">{{ reasons.name }}&nbsp;:&nbsp;{{ reasons.reason }}</p>
                </div>
              </td>
            </tr>
          </table>
          <div style="text-align: center; margin-top: 25px">
            <div v-if="visitedTableList.maid != this.$store.getters.showuserGuid && visitedTableList.mpSureflg1 == '0' && visitedTableList.delflg == '1'">
              <el-button type="primary" icon="el-icon-circle-check" style="padding-left: 14px; padding-right: 14px" @click="joinmeeting()">確認</el-button>
              <el-button type="danger" icon="el-icon-circle-close" style="padding-left: 14px; padding-right: 14px" @click="dialogFormVisible1 = true">拒否</el-button>
            </div>
            <div v-if="visitedTableList.maid != this.$store.getters.showuserGuid && visitedTableList.mpSureflg1 == '2' && visitedTableList.delflg == '1'">
              <el-button type="primary" icon="el-icon-circle-check" style="padding-left: 14px; padding-right: 14px" @click="joinmeeting()">確認</el-button>
            </div>
            <div v-if="visitedTableList.maid != this.$store.getters.showuserGuid && visitedTableList.mpSureflg1 == '1' && visitedTableList.delflg == '1'">
              <el-button type="danger" icon="el-icon-circle-close" style="padding-left: 14px; padding-right: 14px" @click="dialogFormVisible1 = true">拒否</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="理由入力" v-model="dialogFormVisible1" width="20%" destroy-on-close @close="join.mpSureremark=''">
        <el-input v-model="join.mpSureremark" type="textarea" autosize autocomplete="off" placeholder=""></el-input>
        <div style="margin-top: 15px; text-align: center; margin-bottom: -10px;">
          <el-button type="primary" @click="joinmeeting1()">確認</el-button>
          <el-button type="danger" @click="dialogFormVisible1 = false">キャンセル</el-button>
        </div>
      </el-dialog>
      <div class="divider_pagination">
        <!-- <el-divider></el-divider> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Search.indexPage"
          :page-size="Search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Search: {
        searchbean: {
          meetingStatus: '1',
          beginTime: '',
          endTime: '',
          userinfoGuid: this.$store.getters.showuserGuid
        },
        indexPage: 1,
        pageSize: 8
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      value1: '',
      visitedTableList: {
        meetingtime: '',
        period: '',
        mpUserName1: '',
        mpUserName2: [],
        mpUserName3: [],
        mpSureremark1: '',
        reasons: [],
        mpSureflg1: ''
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      join: {
        mpId: '',
        mpSureflg: '',
        mpSureremark: ''
      }
    }
  },
  created() {
    this.searchVisited()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 监听 pagesize 改变的事件 ページサイズ変更イベントを聞く
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.searchVisited()
    },
    // 监听 页码值 改变的事件 ページ番号値変更イベントの監視
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.searchVisited()
    },
    searchVisited() {
      if (this.value1 != null && this.value1.length > 0) {
        this.Search.searchbean.beginTime = this.value1[0]
        this.Search.searchbean.endTime = this.value1[1]
      } else {
        var date = new Date()
        var year = date.getFullYear()
        var month = (date.getMonth() + 1 + "").padStart(2, "0");
        var day = (date.getDate() + "").padStart(2, "0");
        // var year = date.getFullYear()
        this.Search.searchbean.beginTime = year+'-'+month+'-'+day
        this.Search.searchbean.endTime = ''
      }
      // if (this.value1 != null) {
      //   this.Search.searchbean.beginTime = this.value1[0]
      //   this.Search.searchbean.endTime = this.value1[1]
      // } else if (this.value1 == null) {
      //   this.Search.searchbean.beginTime = ''
      //   this.Search.searchbean.endTime = ''
      // }
      console.log(this.Search.searchbean)
      console.log(this.Search.searchbean.meetingStatus)
      this.axios
        .post('/meetingpersons/select/list/byid', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          this.total = res.data.data.total
        })
        .catch((err) => {
          console.log(err)
        })
    },
    openDetail(Id, mpSureflg, Pid) {
      console.log(Id)
      console.log(Pid)
      this.axios
        .put('/meetingpersons/update/read', { mpId: Pid })
        .then((res) => {
          console.log(res)
          this.$emit('func')
        })
        .catch((error) => {
          console.log(error)
        })
      this.dialogFormVisible = true
      console.log(this.dialogFormVisible)
      this.axios
        .post('/meeting/select', { mid: Id })
        .then((res) => {
          console.log(res)
          if (res.data.success !== 1) {
            return this.$message.error('データの取得に失敗しました')
          }
          this.visitedTableList = res.data.data
          this.visitedTableList.meetingtime = res.data.data.mbtime.substring(0, 10)
          this.visitedTableList.period = res.data.data.mbtime.substring(11, 19) + '-' + res.data.data.metime.substring(11, 19)
          console.log(this.visitedTableList.meetingtime)
          console.log(this.visitedTableList.period)
          this.visitedTableList.mpUserName2 = []
          this.visitedTableList.mpUserName3 = []
          this.visitedTableList.reasons = []
          this.visitedTableList.mpSureremark1 = '0'

          for (var i = 0; i < res.data.data.meetingpersonsVos.length; i++) {
            if (res.data.data.meetingpersonsVos[i].mpType == 1) {
              this.visitedTableList.mpUserName1 = res.data.data.meetingpersonsVos[i].mpUserName
            }
            if (res.data.data.meetingpersonsVos[i].mpType == 2) {
              this.visitedTableList.mpUserName2.push(res.data.data.meetingpersonsVos[i].mpUserName)
            }
            if (res.data.data.meetingpersonsVos[i].mpType == 3) {
              this.visitedTableList.mpUserName3.push(res.data.data.meetingpersonsVos[i].mpUserName)
            }
            if (
              (res.data.data.meetingpersonsVos[i].mpType == 2 || res.data.data.meetingpersonsVos[i].mpType == 3) &&
              res.data.data.meetingpersonsVos[i].mpSureremark != '' &&
              res.data.data.meetingpersonsVos[i].mpSureremark != null
            ) {
              this.visitedTableList.reasons.push({ name: res.data.data.meetingpersonsVos[i].mpUserName, reason: res.data.data.meetingpersonsVos[i].mpSureremark })
              this.visitedTableList.mpSureremark1 = '1'
            } else if ((res.data.data.meetingpersonsVos[i].mpType == 2 || res.data.data.meetingpersonsVos[i].mpType == 3) && res.data.data.meetingpersonsVos[i].mpSureremark == null) {
              this.visitedTableList.reasons.push({ name: res.data.data.meetingpersonsVos[i].mpUserName, reason: '未確認' })
              this.visitedTableList.mpSureremark1 = '1'
            }
            if (res.data.data.meetingpersonsVos[i].userinfoGuid == this.$store.getters.showuserGuid) {
              this.join.mpId = res.data.data.meetingpersonsVos[i].mpId
            }
          }
          console.log(this.visitedTableList.mpUserName1)
          this.visitedTableList.mpSureflg1 = mpSureflg
          console.log(this.visitedTableList.mpSureflg1)
          console.log(this.visitedTableList.reasons)
          console.log(this.visitedTableList.meetingpersonsVos)
          console.log(this.visitedTableList.mpSureremark1)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    joinmeeting() {
      this.join.mpSureflg = '1'
      this.$confirm('参加してもよろしいですか？', 'メッセージ', {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(() => {
        this.axios
          .put('/meetingpersons/update/join', this.join)
          .then((res) => {
            console.log(res)
            if (res.data.success !== 1) {
              return this.$message.error(res.data.msg)
            }
            this.dialogFormVisible = false
            this.$message.success('すでに参加しています！')
            this.searchVisited()
          })
          .catch((error) => {
            console.log(error)
          })
      },
      (res)=>{
        console.log(res)
      })
    },
    joinmeeting1() {
      if (this.join.mpSureremark == ''){
        return this.$message.error('理由をご入力してください！')
      }
      this.join.mpSureflg = '2'
      this.$confirm('参加しないでよろしいですか？', 'メッセージ', {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(() => {
        this.axios
          .put('/meetingpersons/update/join', this.join)
          .then((res) => {
            console.log(res)
            if (res.data.success !== 1) {
              return this.$message.error(res.data.msg)
            }
            this.dialogFormVisible = false
            this.dialogFormVisible1 = false
            this.$message.success('参加を拒否しました！')
            this.searchVisited()
          })
          .catch((error) => {
            console.log(error)
          })
      },
      (res)=>{
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.detail {
  height: 50px;
  /* background-color: #00FFFF; */
  margin-top: 10px;
}

.detail_rowleft {
  float: left;
}
.detail_rowright {
  float: right;
  padding-right: 6px;
  padding-top: 2px;
}

.el-divider {
  position: absolute;
  bottom: 75px;
  width: 1030px;
}

.el-select {
  width: 170px;
}

.dialog_detail {
  width: 380px;
  padding-bottom: 25px;
}

.dialog_detail1 {
  width: 160px !important;
}
.save {
  position: relative;
  left: 245px;
  bottom: 0px;
  margin-bottom: 30px;
}
/* 验证规则错误后的小字样式
 ルールミスを検証した後の小さな文字パターン*/
:deep(.el-form-item__error) {
  width: 200px;
  margin-top: -23px;
}

:deep(.el-range-editor--medium.el-input__inner) {
  width: 310px;
}

:deep(.el-input--mini .el-input__icon) {
  line-height: 35px;
}

:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
  content: '';
}
:deep(.mytr) {
  border: 1px solid #929292 !important;
}

:deep(.mytd) {
  text-align: center !important;
  padding-right: 0px !important;
  border: 1px solid #929292 !important;
  background: #e6e6e6;
  width: 120px;
}

:deep(.mytd1) {
  border: 1px solid #929292 !important;
  padding-left: 10px !important;
}

:deep(.mytable) {
  width: 100%;
}
/* table番号居中 */
:deep(.el-table--border .el-table__cell:first-child .cell) {
  text-align: center;
}
:deep(.el-textarea.el-input--medium .el-textarea__inner) {
  height: 190px !important;
}
:deep(.meetingdialog .el-dialog__body){
  display: flex;
  justify-content: center;
  align-content: center;
}
.tddiv{
   max-height: 90px;
   overflow-y: auto;
   padding-top: 5px;
   padding-bottom: 5px;
}
.tddiv1{
  max-height: 50px;
  overflow-y: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}
.tdp{
  height: 25px;
  line-height: 25px;
}
.tdbtn{
  background-color: #009688;
  color: #ffffff;
  margin-bottom: 5px;
  margin-top: 5px;
}
.tdbtn1{
  background-color: #009688;
  color: #ffffff;
  margin-left: 0px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}
</style>
